<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 900px;
            height: auto;
            display: grid;
            grid: auto-flow 300px / repeat(3, 300px);
            column-gap: 5px;
            row-gap: 20px;
            margin: 0 auto;
        }

        .box>div {
            display: grid;
            place-items: center;
            place-content: center;
            background: #000;
        }

        .box>div>span {
            color: #fff;
            min-height: 30px;
            text-align: center;
            margin-top: 10px;
        }

        .box>div>img {
            width: 200px;
            height: 200px;
            background: #aaa;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            <span>图片原尺寸大于img标签尺寸</span>
            <img src="./image/big.jpg" alt="" srcset="" style="object-fit: scale-down;object-position: 50% 50%;" />
        </div>
        <div>
            <span>object-position: 50% 50%;示例图</span>
        </div>
        <div>
            <span>图片原尺寸小于于img标签尺寸</span>
            <img src="./image/small.jpg" alt="" srcset="" style="object-fit: scale-down;object-position: 50% 50%;" />
        </div>
        <!--  -->
        <div>
            <span>图片原尺寸大于img标签尺寸</span>
            <img src="./image/big.jpg" alt="" srcset="" style="object-fit: scale-down;object-position: 0 0;" />
        </div>
        <div>
            <span>object-position: 0 0;示例图</span>
        </div>
        <div>
            <span>图片原尺寸小于于img标签尺寸</span>
            <img src="./image/small.jpg" alt="" srcset="" style="object-fit: scale-down;object-position: 0 0;" />
        </div>
        <!--  -->
        <div>
            <span>图片原尺寸大于img标签尺寸</span>
            <img src="./image/big.jpg" alt="" srcset="" style="object-fit: scale-down;object-position: 100% 100%;" />
        </div>
        <div>
            <span>object-position: 100% 100%;示例图</span>
        </div>
        <div>
            <span>图片原尺寸小于于img标签尺寸</span>
            <img src="./image/small.jpg" alt="" srcset="" style="object-fit: scale-down;object-position: 100% 100%;" />
        </div>
        <!--  -->
        <div>
            <span>图片原尺寸大于img标签尺寸</span>
            <img src="./image/big.jpg" alt="" srcset="" style="object-fit: scale-down;object-position: center center;" />
        </div>
        <div>
            <span>object-position: center center;示例图</span>
        </div>
        <div>
            <span>图片原尺寸小于于img标签尺寸</span>
            <img src="./image/small.jpg" alt="" srcset="" style="object-fit: scale-down;object-position: center center;" />
        </div>
    </div>
</body>

</html>